<template>
  <div>
    <section style="margin-bottom: 55px; overflow: visible">
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item id="首页">
          <router-view/>
        </mt-tab-container-item>
        <mt-tab-container-item id="供应采购">
          <router-view name="user"/>
        </mt-tab-container-item>
        <mt-tab-container-item id="发布">
          <router-view name="send"/>
        </mt-tab-container-item>
        <mt-tab-container-item id="即时消息">
          <router-view name="news"/>
        </mt-tab-container-item>
        <mt-tab-container-item id="我的">
          <router-view name="user"/>
        </mt-tab-container-item>
      </mt-tab-container>
    </section>

    <!-- 导航 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="首页">
        <img slot="icon" src="../../assets/home2.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="供应采购">
        <img slot="icon" src="../../assets/resources2.png">
        供应采购
      </mt-tab-item>
      <mt-tab-item id="发布">
        <img slot="icon" src="../../assets/send.png">
        发布
      </mt-tab-item>
      <mt-tab-item id="即时消息">
        <img slot="icon" src="../../assets/zixun2.png">
        即时消息
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../../assets/user2.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    name: "tabbar",
    data() {
      return {
        selected : '首页'
      }
    },
    beforeMount(){
      this.selected = localStorage.getItem('tab_selected')
    },
    watch:{
      'selected': function (val, oldVal) {
        localStorage.setItem('tab_selected', val)
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>

</style>
